<template>
  <div class="mainContent">
    <a-spin :spinning="spinning">
      <div style="width: 90%; margin: 0 auto; margin-top: 30px">
        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
            >终端信息</a-col
          >
        </a-row>
        <a-form style="margin-bottom: 20px" layout="inline">
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="会员编号"
          >
            <span class="ant-form-text">{{
              terminalDTO.merchantMemberNo
            }}</span>
          </a-form-item>
          <!-- <a-form-item class='formItemWidth' v-bind="formItemLayout" label="会员账号">
                        <span class="ant-form-text">
                            {{terminalDTO.memberAccount}}
                        </span>
          </a-form-item>-->
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="商户名称"
          >
            <span class="ant-form-text">{{ terminalDTO.memberName }}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="SN设备号"
          >
            <span class="ant-form-text">{{ terminalDTO.sncode }}</span>
          </a-form-item>

          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="终端类型"
          >
            <span class="ant-form-text">
              <span
                class="ant-form-text"
                v-if="terminalDTO.terminalType == 'pos'"
                >传统pos</span
              >
              <span
                class="ant-form-text"
                v-if="terminalDTO.terminalType == 'minipos'"
                >电签pos</span
              >
              <span
                class="ant-form-text"
                v-if="terminalDTO.terminalType == 'epos'"
                >智能pos</span
              >
              <span
                class="ant-form-text"
                v-if="terminalDTO.terminalType == 'mpos'"
                >mpos</span
              >
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="终端品牌"
          >
            <span class="ant-form-text">{{ terminalDTO.factoryName }}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="终端型号"
          >
            <span class="ant-form-text">{{ terminalDTO.modelName }}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
          ></a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
          ></a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
          ></a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="装机地址"
          >
            <span v-if="queryDetail.agentType == 'direct'&&sensitive=='0'" class="ant-form-text"
              >{{ terminalDTO.provinceName }}-{{ terminalDTO.countyName }}-{{
                terminalDTO.address
              }}</span
            >
            <span
              v-else
              class="ant-form-text"
              >{{ terminalDTO | otherfilter }}</span
            >
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
          ></a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
          ></a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="装机联系人"
          >
            <span v-if="queryDetail.agentType == 'direct'&&sensitive=='0'" class="ant-form-text">{{ terminalDTO.contactName }}</span>
            <span v-else class="ant-form-text">{{ terminalDTO.contactName |nameFilter}}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="联系电话"
          >
            <span v-if="queryDetail.agentType == 'direct'&&sensitive=='0'" class="ant-form-text">{{ terminalDTO.contactPhone }}</span>
            <span v-else class="ant-form-text">{{ terminalDTO.contactPhone |phoneFilter}}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
          ></a-form-item>
        </a-form>
        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
            >合作机构信息</a-col
          >
        </a-row>
        <a-form style="margin-bottom: 20px" layout="inline">
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="合作机构号"
          >
            <span class="ant-form-text">{{ terminalDTO.agentCode }}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="合作机构名称"
          >
            <span v-if="queryDetail.agentType == 'direct'&&sensitive=='0'" class="ant-form-text">{{ terminalDTO.agentName }}</span>
            <span v-else class="ant-form-text">{{ terminalDTO.agentName|accountfilter1 }}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
          ></a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="绑定时间"
          >
            <span class="ant-form-text">{{ terminalDTO.ctime }}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
          ></a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
          ></a-form-item>
          <a-button
            v-if="openButton"
            style="font-size: 12px; height: 30px"
            @click="downLoadOther"
            type="primary"
            :loading="loading"
            >下载附件</a-button
          >
          <div v-if="openButton && transTargetDTOList != null">
            <a-row>
              <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
                >活动规则</a-col
              >
            </a-row>
            <span>
              自首笔交易之日起：
              <br />
              <span v-for="item in transTargetDTOList" :key="item">
                &ensp;&ensp;第{{ item.startDay }}至{{
                  item.endDay
                }}天，交易量累计达到{{ item.targetAmount }}元，返现{{
                  item.rewardAmount
                }}元；
                <br />
              </span>
            </span>
            <br />
            <br />
          </div>
        </a-form>
        <div v-if="openButton" class="footBtnClass">
          <a-button
            size="large"
            v-if="terminalStatus == 0"
            @click="openTerminal"
            type="primary"
            >开启终端</a-button
          >
          <a-button
            size="large"
            v-if="terminalStatus == 1"
            @click="openTerminal"
            type="primary"
            >关闭终端</a-button
          >
          <a-button
            size="large"
            style="margin-left: 40px"
            @click="RelieveTerminal"
            type="primary"
            >解绑终端</a-button
          >
          <a-button
            size="large"
            style="margin-left: 40px"
            @click="openAddressmodel"
            type="primary"
            >修改装机信息</a-button
          >
        </div>
      </div>
    </a-spin>
    <a-modal
      style="top: 250px"
      @ok="handleOk"
      @cancel="handleCancel"
      :visible="modalVisible"
      :footer="null"
    >
      <div class="modalClass">
        <h4 v-if="terminalStatus == 1">确认关闭此终端？</h4>
        <h4 v-if="terminalStatus == 0">确认开启此终端？</h4>
        <div class="footClass">
          <a-button class="btnClass" type="primary" @click="opencloseTerminal"
            >确认</a-button
          >
          <a-button class="btnClass" type="primary" @click="handleCancel"
            >取消</a-button
          >
        </div>
      </div>
    </a-modal>
    <a-modal
      style="top: 250px"
      @ok="handleOk2"
      @cancel="handleCancelRelieve"
      :visible="RelieveVisible"
      :footer="null"
    >
      <div class="modalClass">
        <h4>确认解绑此终端？</h4>
        <div class="footClass">
          <a-button class="btnClass" type="primary" @click="sureClose"
            >确认</a-button
          >
          <a-button class="btnClass" type="primary" @click="handleCancelRelieve"
            >取消</a-button
          >
        </div>
      </div>
    </a-modal>
    <a-modal v-model="Addressvisible" :footer="null">
      <div>
        <a-form>
          <a-form-item>
            &ensp;&ensp;详细地址：<a-input
              placeholder="详细地址"
              style="width: 55%"
              v-model="AddressQuery.address"
            />
          </a-form-item>
          <a-form-item>
            装机联系人：<a-input
              placeholder="装机联系人"
              style="width: 55%"
              v-model="AddressQuery.contactName"
            />
          </a-form-item>
          <a-form-item>
            &ensp;&ensp;联系电话：<a-input
              placeholder="联系电话"
              style="width: 55%"
              v-model="AddressQuery.contactPhone"
            />
          </a-form-item>
        </a-form>
      </div>
      <div>
        <a-button
          style="margin-left: 150px"
          type="primary"
          @click="modifyAddress"
          >确认</a-button
        >
        <a-button style="margin-left: 1vw" type="primary" @click="handleCancel2"
          >取消</a-button
        >
      </div>
    </a-modal>
  </div>
</template>

<script>

import { message } from "ant-design-vue";
import api from "@/common/api";
import { error } from "util";
import { fail } from "assert";
import AHideData from "../common/HideData";

export default {
  name: "orgMyInfo",
  components: {
    AHideData,
  },
  data() {
    return {
      iconLoading: false,
      loading: false,
      spinning: false,
      terminalStatus: 1,
      sncode: "",
      id: "",
      modalVisible: false,
      RelieveVisible: false,
      Addressvisible: false,
      openButton: false,
      transTargetDTOList: null,
      queryDetail: {},
      terminalDTO: {},
      attachRequest: {},
      AddressQuery: {
        sncode: "",
        contactName: "",
        contactPhone: "",
        address: "",
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15, offset: 1 },
          md: { span: 15, offset: 1 },
        },
      },
      sensitive:localStorage.getItem("sensitive")
    };
  },
  filters: {
    nameFilter(value) {
      if (value) {
        var reg = /^./;
        return value.replace(reg, "*");
      }
    },
    phoneFilter(value) {
      if (value) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return value.replace(reg, "$1****$2");
      }
    },
    otherfilter(value) {
      if (value.provinceName) {
        let data =
          value.provinceName + "-" + value.countyName + "-" + value.address;
        let len = data.length - 2;
        let arr = [];
        for (let i = 0; i < len; i++) {
          let item = "*";
          arr.push(item);
        }
        let arrstring = arr.join("");
        return (
          data.substring(0, 1) + arrstring + data.substring(data.length - 1)
        );
      }
    },
    accountfilter1(value) {
      if (value) {
          let len = value.length - 2;
          let arr = [];
          for (let i = 0; i < len; i++) {
            let item = "*";
            arr.push(item);
          }
          let arrstring = arr.join("");
          return (
            value.substring(0, 1) +
            arrstring +
            value.substring(value.length - 1)
          );
      }
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    this.terminalStatus = this.$route.params.status;
    // console.log(id)
    // console.log(this.terminalStatus)
    this.getQueryDetail(this.id);
  },
  methods: {
    handleOk(e) {
      this.modalVisible = false;
    },
    handleOk2(e) {
      this.RelieveVisible = false;
    },
    handleCancel(e) {
      this.modalVisible = false;
    },
    handleCancel2(e) {
      this.Addressvisible = false;
    },
    openTerminal() {
      this.modalVisible = true;
    },
    openAddressmodel() {
      this.AddressQuery = {
        sncode: this.terminalDTO.sncode,
        contactName: this.terminalDTO.contactName,
        contactPhone: this.terminalDTO.contactPhone,
        address: this.terminalDTO.address,
      };
      this.Addressvisible = true;
    },

    RelieveTerminal() {
      this.RelieveVisible = true;
    },
    handleCancelRelieve(e) {
      this.RelieveVisible = false;
    },
    modifyAddress() {
      if (this.AddressQuery.address == "") {
        this.$message.error("请输入详细地址");
        return false;
      }
      if (this.AddressQuery.contactName == "") {
        this.$message.error("请输入装机联系人");
        return false;
      }
      if (this.AddressQuery.contactPhone == "") {
        this.$message.error("请输入联系电话");
        return false;
      }
      if (
        this.AddressQuery.contactPhone &&
        !/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.AddressQuery.contactPhone)
      ) {
        this.$message.error("您输入的手机号格式有误！");
        return false;
      }
      this.$axios
        .post("/agent/terminal/update", this.AddressQuery)
        .then((res) => {
          if (res.data.code == "OK") {
            this.Addressvisible = false;
            this.$message.success("提交成功");
            this.getQueryDetail(this.id);
          } else {
            this.Addressvisible = false;
            this.$message.error(res.data.message);
          }
        });
    },
    opencloseTerminal() {
      if (this.terminalStatus == 1) {
        this.$axios
          .get("/agent/terminal/closeTerminal/" + this.sncode)
          .then((res) => {
            if (res.data.code == "OK") {
              this.modalVisible = false;
              this.$message.success("已关闭终端");
              this.$router.push("/Terminal/terminalInfoQuery");
            } else {
              this.modalVisible = false;
              this.$message.error(res.data.message);
            }
          });
      } else {
        this.$axios
          .get("/agent/terminal/openTerminal/" + this.sncode)
          .then((res) => {
            if (res.data.code == "OK") {
              this.modalVisible = false;
              this.$message.success("已开启终端");
              this.$router.push("/Terminal/terminalInfoQuery");
            } else {
              this.modalVisible = false;
              this.$message.error(res.data.message);
            }
          });
      }
    },
    sureClose() {
      this.$axios
        .get("/agent/terminal/unbindTerminal/" + this.id)
        .then((res) => {
          if (res.data.code == "OK") {
            this.RelieveVisible = false;
            this.$message.success("解绑成功");
            this.$router.push("/Terminal/terminalInfoQuery");
          } else {
            this.RelieveVisible = false;
            this.$message.error(res.data.message);
          }
        });
    },
    downLoadOther() {
      this.loading = true;
      this.$axios.post("/file/file/attach", this.attachRequest).then(
        (res) => {
          this.loading = false;
          if (res.data.data != null) {
            window.location.href = res.data.data;
          } else {
            this.$message.error("附件不存在");
          }
        },
        (err) => {
          this.loading = false;
          this.$message.error(err.message);
        }
      );
    },
    modifyInfo() {},
    getQueryDetail(id) {
      this.$axios.get("/agent/terminal/getById/" + id).then(
        (res) => {
          console.log(res);
          if (res.data.code == "OK") {
            this.queryDetail = res.data.data;
            this.openButton = res.data.data.terminalDTO.openButton;
            this.sncode = res.data.data.terminalDTO.sncode;
            this.transTargetDTOList = res.data.data.transTargetDTOList;
            this.attachRequest = res.data.data.attachRequest;
            this.terminalDTO = res.data.data.terminalDTO;
          }
        },
        (err) => {}
      );
    },
  },
};
</script>

<style lang="less" scoped>
.card_sty {
  margin-bottom: 30px;
}

.mainContent {
  overflow-y: scroll;
  height: 100%;
  padding: 30px;
}

/* 滚动条样式 */
.mainContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

span {
  cursor: pointer;
}

.formItemWidth {
  width: 30%;
  margin-bottom: 10px;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 15px;
  text-align: left;
  /* margin-left: 20px; */
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}

.modalClass {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 10px;
}

.modalClass h4 {
  font-size: 20px;
  font-weight: 400;
  margin-top: 15px;
  margin-bottom: 25px;
}

.modalClass p {
  margin-bottom: 10px;
}

.footBtnClass {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footClass {
  width: 60%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.btnClass {
  width: 110px;
}
</style>